import React,{Component} from "react";
import { View, Text, Image, StyleSheet, ScrollView, TouchableWithoutFeedback } from "react-native";
import {statusBarHeight,width} from "../../util/apdater_util";
import {BoxShadow} from 'react-native-shadow'
import * as RootNavigation from '../../../App'
import NetUtil from '../../net/net_util'

class Mine_page extends Component{
  constructor(props) {
    super(props);
    this.state={
      userInfo:{}
    }
  }

  componentDidMount() {
    this.getUserInfo()
  }

  /*获取会员详情*/
  getUserInfo(){
    NetUtil.get('member/member/detail',{},(res)=>{
      console.log(res)
      if(res.code==200){
        this.setState({userInfo:res.data})
      }
    })
  }

  goToPage(page,params){
    RootNavigation.navigate(page,params)
  }
  render(){
    const shadowOpt = {
      width:width-25,
      height:80,
      border:4,
      color:"#000",
      opacity:0.03,
      x:12.5,
      y:-27,
      style:{marginVertical:5}
    }
    const cardShadowOpt = {
      width:width-25,
      height:200,
      border:4,
      color:"#000",
      opacity:0.01,
      x:12.5,
      y:-20,
      style:{marginVertical:5}
    }
    return (
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        <ScrollView scrollEnabled={true}>
          <View style={{height:statusBarHeight+44,backgroundColor:'#fff'}}></View>
          <View style={styles.header}>
            <TouchableWithoutFeedback onPress={()=>{this.goToPage('PersonHomePage',{type:2})}}>
              <View style={styles.flex}>
                <Image style={styles.portrait} source={{uri:this.state.userInfo.avatar}}></Image>
                <View style={{marginLeft:9}}>
                  <View style={styles.nameBox}>
                    <Text style={styles.name}>{this.state.userInfo.nickName}</Text>
                    <View style={styles.flagBox}><Text style={styles.flag}>{this.state.userInfo.type==1?'普通用户':(this.state.userInfo.type==2?'经纪人':'VIP')}</Text></View>
                  </View>
                  <Text style={styles.label}>{this.state.userInfo.motto}</Text>
                  <Text style={[styles.label,{marginTop:7}]}>{this.state.userInfo.industryName}</Text>
                </View>
                <Image style={styles.arrow} source={require('../../img/arrow_right_icon.png')}></Image>
              </View>
            </TouchableWithoutFeedback>
            <View style={styles.itemBox}>
              <TouchableWithoutFeedback onPress={()=>{this.goToPage('MyFansList')}}>
                <View style={styles.item}>
                  <Text style={styles.num}>{this.state.userInfo.followNum}</Text>
                  <Text style={styles.itemName}>关注</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={()=>{this.goToPage('MyFansList')}}>
                <View style={styles.item}>
                  <Text style={styles.num}>{this.state.userInfo.fansNum}</Text>
                  <Text style={styles.itemName}>粉丝</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={()=>{this.goToPage('MyIntegral')}}>
                <View style={styles.item}>
                  <Text style={styles.num}>{this.state.userInfo.points}</Text>
                  <Text style={styles.itemName}>积分</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
          </View>
          <BoxShadow setting={shadowOpt}>
            <View style={styles.menuBox}>
              <TouchableWithoutFeedback onPress={()=>{this.goToPage('MyJobList')}}>
                <View style={styles.menuItem}>
                  <Image style={styles.menuIcon} source={require('../../img/1.png')}></Image>
                  <Text style={styles.menuTitle}>我的兼职</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={()=>{this.goToPage('MyFavor')}}>
                <View style={styles.menuItem}>
                  <Image style={styles.menuIcon} source={require('../../img/2.png')}></Image>
                  <Text style={styles.menuTitle}>我的点赞</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={()=>{this.goToPage('MyFavor')}}>
                <View style={styles.menuItem}>
                  <Image style={styles.menuIcon} source={require('../../img/3.png')}></Image>
                  <Text style={styles.menuTitle}>我的收藏</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={()=>{this.goToPage('MyLearnRecord')}}>
                <View style={styles.menuItem}>
                  <Image style={styles.menuIcon} source={require('../../img/4.png')}></Image>
                  <Text style={styles.menuTitle}>学习记录</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
          </BoxShadow>
          <BoxShadow setting={cardShadowOpt}>
            <View style={styles.card}>
              <Text style={styles.serviceTitle}>更多服务</Text>
              <View style={styles.serviceBox}>
                <TouchableWithoutFeedback onPress={()=>{this.goToPage('OrderList')}}>
                  <View style={styles.serviceItem}>
                    <Image style={styles.serviceIcon} source={require('../../img/5.png')}></Image>
                    <Text style={styles.serviceName}>兑换订单</Text>
                  </View>
                </TouchableWithoutFeedback>
                <View style={styles.serviceItem}>
                  <Image style={styles.serviceIcon} source={require('../../img/6.png')}></Image>
                  <Text style={styles.serviceName}>我的好友</Text>
                </View>
                <TouchableWithoutFeedback onPress={()=>{this.goToPage('MallList')}}>
                  <View style={styles.serviceItem}>
                    <Image style={styles.serviceIcon} source={require('../../img/7.png')}></Image>
                    <Text style={styles.serviceName}>积分商场</Text>
                  </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={()=>{this.goToPage('HelpAndFeedBack')}}>
                  <View style={styles.serviceItem}>
                    <Image style={styles.serviceIcon} source={require('../../img/8.png')}></Image>
                    <Text style={styles.serviceName}>帮助与反馈</Text>
                  </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback onPress={()=>{this.goToPage('Set')}}>
                  <View style={[styles.serviceItem]}>
                    <Image style={styles.serviceIcon} source={require('../../img/9.png')}></Image>
                    <Text style={styles.serviceName}>系统设置</Text>
                  </View>
                </TouchableWithoutFeedback>
              </View>
            </View>
          </BoxShadow>
          <Image style={styles.bar} source={require('../../img/mine_bar.png')}></Image>
        </ScrollView>
      </View>
    )
  }
}
export default module=Mine_page

const styles=StyleSheet.create({
  header:{
    height:180,
    backgroundColor:'#fff',
    paddingHorizontal:18,
  },
  flex:{
    flexDirection:'row',
    justifyContent:'flex-start'
  },
  portrait:{
    width:51,
    height:51,
    borderRadius:25
  },
  nameBox:{
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems:'center'
  },
  name:{
    color:'#D68E66',
    fontSize:24,
    fontWeight:'600'
  },
  flagBox:{
    width:41,
    height:17,
    borderRadius: 8.5,
    marginLeft:9,
    backgroundColor:'#E39354',
  },
  flag:{
    flex:1,
    color:'#fff',
    fontSize:10,
    textAlign:'center',
    lineHeight:17,
    borderRadius: 8.5
  },
  label:{
    marginTop:12,
    color:'rgba(214, 142, 102, 0.5)'
  },
  itemBox:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems: 'center',
    marginTop:8
  },
  item:{
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center',
    flex:1,
    height:78
  },
  num:{
    color:'#292930',
    fontSize:25,
    fontWeight:'500'
  },
  itemName:{
    color:'#999999',
    fontSize:12,
    marginTop:9
  },
  menuBox:{
    height:82,
    width:width-25,
    flexDirection:'row',
    justifyContent:'flex-start',
    marginLeft:12.5,
    marginTop:-28,
    borderRadius:5,
    backgroundColor:'#fff'
  },
  menuItem:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  menuIcon:{
    width:25,
    height:25
  },
  menuTitle:{
    color:'#222222',
    fontSize:12,
    marginTop:12
  },
  card:{
    backgroundColor:'#fff',
    height:200,
    width:width-25,
    marginLeft:12.5,
    marginTop:-20,
    borderRadius:8
  },
  serviceBox:{
    flexDirection:'row',
    justifyContent:'flex-start',
    flexWrap:'wrap'
  },
  serviceItem:{
    width:(width-25)/4.0,
    justifyContent:'center',
    alignItems:'center',
    height:75
  },
  serviceTitle:{
    marginLeft:15,
    marginTop:18,
    color:'#222222',
    fontSize:15,
    fontWeight:'500'
  },
  serviceIcon:{
    width:25,
    height:25
  },
  serviceName:{
    color:'#9C9FA8',
    fontSize:12,
    marginTop:8
  },
  bar:{
    width:width-25,
    height:80,
    marginLeft:12.5,
    marginTop:-10
  },
  arrow:{
    position:'absolute',
    right:0,
    top:12,
    width:6,
    height:12
  }
})
